<template>
    <div class="course-grid">
      <el-card v-for="course in courses" :key="course.id" class="course-card">
        <template #header>{{ course.title }}</template>
        <img :src="course.image" style="width: 100%" />
        <p class="course-description">{{ course.description }}</p>
        <p class="course-price">价格: {{ course.price }} 元</p>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const courses = ref([
    {
      id: 1,
      title: '前端基础课程',
      image: 'https://www.xiaodiketang.com/static/images/course/frontend-basics.jpg',
      description: '学习HTML, CSS, JavaScript的基础知识。',
      price: 199
    },
    {
      id: 2,
      title: 'Vue.js 进阶课程',
      image: 'https://www.xiaodiketang.com/static/images/course/vue-advanced.jpg',
      description: '深入学习Vue.js框架，掌握高级特性。',
      price: 299
    },
    {
      id: 3,
      title: 'React.js 入门课程',
      image: 'https://www.xiaodiketang.com/static/images/course/react-intro.jpg',
      description: '从零开始学习React.js，构建现代Web应用。',
      price: 249
    },
    {
      id: 4,
      title: 'Angular 全面课程',
      image: 'https://www.xiaodiketang.com/static/images/course/angular-full.jpg',
      description: '全面掌握Angular框架，开发企业级应用。',
      price: 349
    },
    {
      id: 5,
      title: 'JavaScript 高级课程',
      image: 'https://www.xiaodiketang.com/static/images/course/js-advanced.jpg',
      description: '深入JavaScript，掌握异步编程和性能优化。',
      price: 299
    },
    {
      id: 6,
      title: 'TypeScript 实战课程',
      image: 'https://www.xiaodiketang.com/static/images/course/typescript-practice.jpg',
      description: '学习TypeScript，提高代码质量和可维护性。',
      price: 249
    },
    {
      id: 7,
      title: '前端性能优化课程',
      image: 'https://www.xiaodiketang.com/static/images/course/performance-optimization.jpg',
      description: '优化前端性能，提升用户体验。',
      price: 199
    },
    {
      id: 8,
      title: '前端自动化测试课程',
      image: 'https://www.xiaodiketang.com/static/images/course/automation-testing.jpg',
      description: '学习如何编写自动化测试，保证代码质量。',
      price: 249
    }
  ]);
  </script>
  
  <style scoped>
  .course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .course-card {
    max-width: 280px;
  }
  
  .course-description {
    font-size: 14px;
    color: #606266;
    margin-bottom: 10px;
  }
  
  .course-price {
    font-size: 16px;
    color: #e6a23c;
    font-weight: bold;
  }
  </style>